<template>
  <div class="todo-footer">
      <label for="">
          <input type="checkbox" :checked="checkNum == totalNum" @change="changeState">
      </label>
      <span>
          <span>已完成{{checkNum}}</span> / 全部{{totalNum}}
      </span>
      <button class="btn btn-danger" @click="clearItemChanged">清除已完成任务</button>
  </div>
</template>

<script>
export default {
    props:['checkNum', 'totalNum'],
    name:'myFooter',
    methods: {
        changeState() {
            if (this.checkNum == this.totalNum) {
                this.$emit('FooterCheck', 0)
            }else {
                this.$emit('FooterCheck', 1)
            }
        },
        clearItemChanged() {
            this.$emit('clearItems')
        }
    },
}
</script>

<style scoped>
    label input{
        margin-left: 5px;
    }
    button {
        float: right;
    }
</style>